<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布课程</h2>

    <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="提交审核" />
    </el-steps>

    <!-- Form -->
    <el-button type="text" @click="dialogFormVisible = true">添加章节</el-button>

    <!-- 对话框 -->
    <el-dialog :visible.sync="dialogFormVisible" title="章节管理">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="章节名称">
          <el-input v-model="form.title" autocomplete="off" placeholder="请输入章节名称" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="章节排序">
          <el-input-number v-model="form.sort" :min="1" :max="10" label="描述文字" @change="handleChange" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveChapter()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 对话框 end-->

    <!-- 课程和小结列表 -->
    <div v-for="item in allChapterVideo" :key="item.id">
      <h3 style="display: block;border:1px solid #A9A9A9;padding:10px">{{ item.title }}</h3>
      <div>
        <span v-for="chilren in item.children" :key="chilren.id" style="padding:10px;display: block;border:1px solid #A9A9A9;margin:20px 0px 20px 50px">{{ chilren.title }}</span>
      </div>
    </div>

    <el-form label-width="150px">
      <el-form-item>
        <el-button @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import chapter from '@/api/edu/chapter.js'

export default {
  data() {
    return {
      saveBtnDisabled: false, // 保存按钮是否禁用
      allChapterVideo: [],
      courseId: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        courseId: this.$route.params.courseId,
        title: '第1章简介',
        sort: 1
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    if (this.$route.params && this.$route.params.courseId) {
      this.courseId = this.$route.params.courseId
      this.getChapterVideo()
    }
  },

  methods: {
    // 对话框确认之后提交
    saveChapter() {
      this.dialogFormVisible = true

      chapter.addChapter(this.form).then(response => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        console.log(response)
      })
    },
    // 根据课程id,查询章节和小结
    handleChange(value) {
      console.log(this.form)
    },
    previous() {
      console.log('previous')
      console.log(this.courseId)
      this.$router.push({ path: '/course/info/' + this.courseId })
      console.log(this.courseId)
    },
    next() {
      console.log('next')
      this.$router.push({ path: '/course/publish/' + this.courseId })
    },
    getChapterVideo() {
      chapter.getAllChapterVideo(this.courseId).then(response => {
        this.allChapterVideo = response.data.allChapterVideo
      })
    }
  }
}
</script>

<style>
</style>
